<template>
  <div class="dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-card">
        <div class="welcome-content">
          <h1 class="welcome-title">欢迎使用智慧课堂管理系统</h1>
          <p class="welcome-subtitle">打造沉浸式学习体验，让知识触手可及</p>
          <div class="welcome-stats">
            <div class="stat-item">
              <div class="stat-number">{{ stats.totalCourses }}</div>
              <div class="stat-label">总课程数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ stats.activeStudents }}</div>
              <div class="stat-label">活跃学员</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ stats.completedLessons }}</div>
              <div class="stat-label">已完成课程</div>
            </div>
          </div>
        </div>
        <div class="welcome-illustration">
          <div class="floating-elements">
            <div class="element element-1">📚</div>
            <div class="element element-2">🎓</div>
            <div class="element element-3">💡</div>
            <div class="element element-4">🚀</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统概览 -->
    <div class="overview-section">
      <div class="section-header">
        <h2>系统概览</h2>
        <p>实时监控智慧课堂运行状态</p>
      </div>
      <div class="overview-grid">
        <div class="overview-card">
          <div class="card-icon">🏫</div>
          <div class="card-content">
            <h3>3D互动课堂</h3>
            <p>虚拟教室环境，沉浸式学习体验</p>
            <div class="card-status">
              <span class="status-dot online"></span>
              <span class="status-text">运行正常</span>
            </div>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">⚙️</div>
          <div class="card-content">
            <h3>智慧课程管理</h3>
            <p>智能课程编排，个性化学习路径</p>
            <div class="card-status">
              <span class="status-dot online"></span>
              <span class="status-text">运行正常</span>
            </div>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">📊</div>
          <div class="card-content">
            <h3>学习数据分析</h3>
            <p>实时学习进度，智能推荐系统</p>
            <div class="card-status">
              <span class="status-dot online"></span>
              <span class="status-text">运行正常</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近活动 -->
    <div class="recent-section">
      <div class="section-header">
        <h2>最近活动</h2>
        <p>查看最新的学习动态</p>
      </div>
      <div class="activity-list">
        <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
          <div class="activity-icon" :class="activity.type">{{ activity.icon }}</div>
          <div class="activity-content">
            <div class="activity-title">{{ activity.title }}</div>
            <div class="activity-time">{{ activity.time }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions">
      <div class="section-header">
        <h2>快速操作</h2>
        <p>常用功能快捷入口</p>
      </div>
      <div class="action-buttons">
        <button class="action-btn primary" @click="goToClassroom">
          <span class="btn-icon">🏫</span>
          <span class="btn-text">进入3D课堂</span>
        </button>
        <button class="action-btn secondary" @click="goToManagement">
          <span class="btn-icon">⚙️</span>
          <span class="btn-text">课程管理</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import courseDataManager from '@/utils/courseDataManager'

export default {
  name: 'Dashboard',
  data() {
    return {
      stats: {
        totalCourses: 0,
        activeStudents: 2847,
        completedLessons: 0
      },
      recentActivities: [
        {
          id: 1,
          type: 'course',
          icon: '📚',
          title: '《人工智能基础》课程讲稿已更新',
          time: '2小时前'
        },
        {
          id: 2,
          type: 'system',
          icon: '🔗',
          title: '数据联动功能已启用，课程管理与3D课堂实时同步',
          time: '3小时前'
        },
        {
          id: 3,
          type: 'student',
          icon: '👨‍🎓',
          title: '张三完成了《机器学习实战》课程',
          time: '5小时前'
        },
        {
          id: 4,
          type: 'achievement',
          icon: '🏆',
          title: '系统新增6页智能讲稿，支持实时编辑',
          time: '1天前'
        }
      ]
    }
  },
  mounted() {
    document.title = '智慧课堂 - 主页'
    this.loadStats()
  },
  methods: {
    // 加载统计数据
    loadStats() {
      const allCourses = courseDataManager.getAllCourses()
      this.stats.totalCourses = allCourses.length
      
      // 计算总讲稿数
      this.stats.completedLessons = allCourses.reduce((total, course) => {
        return total + (course.pptSlides ? course.pptSlides.length : 0)
      }, 0)
      
      console.log('仪表盘统计数据已更新:', this.stats)
    },
    
    goToClassroom() {
      this.$router.push('/3d-classroom')
    },
    goToManagement() {
      this.$router.push('/course-management')
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  .welcome-section {
    margin-bottom: 30px;

    .welcome-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 20px;
      padding: 40px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;

      .welcome-content {
        flex: 1;
        z-index: 2;

        .welcome-title {
          font-size: 32px;
          font-weight: 700;
          margin-bottom: 10px;
          background: linear-gradient(45deg, #fff, #f0f0f0);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .welcome-subtitle {
          font-size: 18px;
          opacity: 0.9;
          margin-bottom: 30px;
        }

        .welcome-stats {
          display: flex;
          gap: 30px;

          .stat-item {
            text-align: center;

            .stat-number {
              font-size: 36px;
              font-weight: 700;
              margin-bottom: 5px;
            }

            .stat-label {
              font-size: 14px;
              opacity: 0.8;
            }
          }
        }
      }

      .welcome-illustration {
        position: relative;
        width: 200px;
        height: 200px;

        .floating-elements {
          position: relative;
          width: 100%;
          height: 100%;

          .element {
            position: absolute;
            font-size: 40px;
            animation: float 3s ease-in-out infinite;

            &.element-1 {
              top: 20%;
              left: 20%;
              animation-delay: 0s;
            }

            &.element-2 {
              top: 60%;
              left: 60%;
              animation-delay: 0.5s;
            }

            &.element-3 {
              top: 30%;
              right: 20%;
              animation-delay: 1s;
            }

            &.element-4 {
              bottom: 20%;
              left: 50%;
              animation-delay: 1.5s;
            }
          }
        }
      }
    }
  }

  .section-header {
    margin-bottom: 20px;

    h2 {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 5px;
    }

    p {
      color: #7f8c8d;
      font-size: 14px;
    }
  }

  .overview-section {
    margin-bottom: 30px;

    .overview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;

      .overview-card {
        background: white;
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-5px);
        }

        .card-icon {
          font-size: 48px;
          margin-right: 20px;
        }

        .card-content {
          flex: 1;

          h3 {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
          }

          p {
            color: #7f8c8d;
            font-size: 14px;
            margin-bottom: 15px;
          }

          .card-status {
            display: flex;
            align-items: center;

            .status-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 8px;

              &.online {
                background-color: #27ae60;
              }
            }

            .status-text {
              font-size: 12px;
              color: #27ae60;
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  .recent-section {
    margin-bottom: 30px;

    .activity-list {
      background: white;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

      .activity-item {
        display: flex;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #ecf0f1;

        &:last-child {
          border-bottom: none;
        }

        .activity-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          margin-right: 15px;

          &.course {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
          }

          &.student {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
          }

          &.system {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            color: white;
          }

          &.achievement {
            background: linear-gradient(135deg, #43e97b, #38f9d7);
            color: white;
          }
        }

        .activity-content {
          flex: 1;

          .activity-title {
            font-size: 14px;
            color: #2c3e50;
            margin-bottom: 5px;
          }

          .activity-time {
            font-size: 12px;
            color: #7f8c8d;
          }
        }
      }
    }
  }

  .quick-actions {
    .action-buttons {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;

      .action-btn {
        display: flex;
        align-items: center;
        padding: 15px 25px;
        border-radius: 12px;
        border: none;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease;
        min-width: 180px;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .btn-icon {
          font-size: 20px;
          margin-right: 10px;
        }

        &.primary {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
        }

        &.secondary {
          background: white;
          color: #2c3e50;
          border: 2px solid #ecf0f1;

          &:hover {
            border-color: #667eea;
            color: #667eea;
          }
        }
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard {
    padding: 15px;

    .welcome-section .welcome-card {
      flex-direction: column;
      text-align: center;
      padding: 30px 20px;

      .welcome-title {
        font-size: 24px;
      }

      .welcome-stats {
        justify-content: center;
        gap: 20px;
      }

      .welcome-illustration {
        margin-top: 20px;
        width: 150px;
        height: 150px;
      }
    }

    .overview-grid {
      grid-template-columns: 1fr;
    }

    .action-buttons {
      flex-direction: column;

      .action-btn {
        width: 100%;
        justify-content: center;
      }
    }
  }
}
</style> 